<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div id="count">0</div>
  <button id="btn">点击防抖</button>
  <script>
    // let count = document.querySelector('#count')
    // let btn = document.querySelector('#btn')
    // let insideCount = 0
    // function debounce (fn, wait) {
    //   let timer
    //   return function () {
    //     let context = this // 目的是为了修改this的指向 如果不修改 name这个this指向的window 因为是settimeout调用的 settimeout的this,指向的是window
    //     let args = arguments
    //     if (timer) clearTimeout(timer)
    //     timer = setTimeout(() => {
    //       fn.apply(context, args)
    //     }, wait);
    //   }
    // }
    // function getUserAction (e) {
    //   console.log(e.target, this);
    //   count.innerHTML = ++insideCount
    // }
    // btn.addEventListener('click', debounce(getUserAction, 1000))
    let show = document.querySelector('#count')
    let btn = document.querySelector("#btn")
    let count = 0
    function getCount () {
      console.log(this);
      // console.log(arguments);
      show.innerHTML = ++count
    }
    function debounce (fn, time) {
      let timer
      return function () {
        let context = this
        let args = [...arguments]
        if (timer) clearTimeout(timer)
        timer = setTimeout(() => {
          fn.apply(context, args)
        }, time);
      }
    }

    btn.addEventListener('click', debounce(getCount, 1000))
  </script>
</body>

</html>